<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自定义属性</title>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <link href='./css/heatmap.css' rel='stylesheet' />
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>

    <script src="../libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
        var plottingLayer,plottingEdit, layer;
        var drawGraphicObject,map,plotting,editor;
        var host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        var mapurl = host + "/iserver/services/map-world/rest/maps/World";
        var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";

        function init(){
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {transparent: true, cacheEnabled: true},{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});

            plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
            plottingLayer.style = {
                fillColor: "#66cccc",
                fillOpacity: 0.4,
                strokeColor: "#66cccc",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius:6
            };

            //态势标绘编辑
            plottingEdit = new SuperMap.Control.PlottingEdit(plottingLayer);

            //添加态势标绘控件
            map.addControls([plottingEdit]);

            plotting = SuperMap.Plotting.getInstance(map, serverUrl);
            editor = plotting.getEditor();
        }

        function addLayer() {
            map.addLayers([layer, plottingLayer]);
            map.setCenter(new SuperMap.LonLat(0, 0), 0);

            //标绘标号
            plotSymbol();

            plottingEdit.activate();
        }

        function plotSymbol(){

            //标绘多边形
            var polygonPoints = [];
            polygonPoints.push(new SuperMap.Geometry.Point(-20, 0));
            polygonPoints.push(new SuperMap.Geometry.Point(-10, 20));
            polygonPoints.push(new SuperMap.Geometry.Point(-30, 40));
            polygonPoints.push(new SuperMap.Geometry.Point(-60, 10));
            plottingLayer.createSymbolWC(0,SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL,polygonPoints);

            //标绘折线
            var linePoints = [];
            linePoints.push(new SuperMap.Geometry.Point(0, 0));
            linePoints.push(new SuperMap.Geometry.Point(0, 20));
            linePoints.push(new SuperMap.Geometry.Point(20, 10));
            linePoints.push(new SuperMap.Geometry.Point(10, 30));
            plottingLayer.createSymbolWC(0,SuperMap.Plot.SymbolType.POLYLINESYMBOL,linePoints);
        }

        function copySymbol()
        {
            editor.copy();
        }

        function cutSymbol()
        {
            editor.cut();
        }

        function pasteSymbol()
        {
            editor.paste();
        }

        function resetSymbol()
        {
            plottingLayer.removeAllFeatures();
            plotSymbol();
        }
    </script>
</head>
<body onload="init()">
<div id = "toolbar">
    <input id="btn_Copy" type="button" class="btn" value="复制" onclick="copySymbol()" />
    <input id="btn_Cut" type="button" class="btn" value="剪切" onclick="cutSymbol()" />
    <input id="btn_Paste" type="button" class="btn" value="粘贴" onclick="pasteSymbol()" />
    <input id="btn_Reset" type="button" class="btn" value="复位" onclick="resetSymbol()" />
</div>
<div id="map"></div>
</body>
</html>
